<template>
  <div id="app">
    <header>
      <div class="header">
        <div class="width1190">
          <div class="fl">您好，欢迎来到兰鸟！</div>
          <div class="fr">
            <a id="login" @click="showLogin" href="javascript:void(0)">登录</a>
            <a id="logout" @click="loginOut" href="javascript:void(0)">退出登录</a>
            <a id="login" @click="showcenter" href="javascript:void(0)"
              >个人中心</a
            >
          </div>
          <div class="fr"></div>
          <div class="clears"></div>
        </div>
        <!--width1190/-->
      </div>
      <!--header/-->
      <div class="logo-phone">
        <div class="width1190">
          <h1 class="logo">
            <a href="index.html"
              ><img
                src="http://demo.mxyhn.xyz:8020/cssthemes6/12.20ZF27/images/logo.png"
                width="163"
                height="59"
            /></a>
          </h1>
          <div class="phones"><strong>20088888888</strong></div>
          <div class="clears"></div>
        </div>
        <!--width1190/-->
      </div>
      <!--logo-phone/-->
      <div class="list-nav">
        <div class="width1190">
          <ul class="nav">
            <li class="nav-item">
              <router-link :to="'/'">首页</router-link>
              <!-- <a href="index.html">首页</a> -->
            </li>
            <li
              @mouseover="overFangNav"
              @mouseout="outFangNav"
              class="nav-item"
            >
              <a href="pro_xin.html">房</a>
              <dl v-show="subNavFangFlg" class="bg-black text-light">
                <dd class="text-center">
                  <router-link :to="'fang_buy'">买房</router-link>
                </dd>
                <dd class="text-center">
                  <router-link :to="'fang_sale'">卖房</router-link>
                </dd>
                <dd class="text-center">
                  <router-link :to="'fang_zu'">租房</router-link>
                </dd>
                <dd class="text-center">
                  <router-link :to="'fang_qiuzu'">求租</router-link>
                </dd>
              </dl>
            </li>
            <li
              @mouseover="subNavCarFlg = true"
              @mouseout="subNavCarFlg = false"
              class="nav-item"
            >
              <a href="pro_xin.html">车</a>
              <dl v-show="subNavCarFlg" class="bg-black text-light">
                <dd class="text-center py-2">
                  <router-link :to="'car_buy'">买车</router-link>
                </dd>
                <dd class="text-center py-2">
                  <router-link :to="'car_sale'">卖车</router-link>
                </dd>
                <dd class="text-center py-2">
                  <router-link :to="'car_zu'">租车</router-link>
                </dd>
                <dd class="text-center py-2">
                  <router-link :to="'car_qiuzu'">求租</router-link>
                </dd>
              </dl>
            </li>
            <div class="clears"></div>
          </ul>
          <!--nav/-->
          <div class="clears"></div>
        </div>
        <!--width1190/-->
      </div>
      <!--list-nav/-->
    </header>
    <div
      class="banner"
      style="background:url(http://demo.mxyhn.xyz:8020/cssthemes6/12.20ZF27/images/ban.jpg) center center no-repeat;"
    ></div>
	<Login v-if="loginShowFlg"></Login>
      <router-view></router-view>
    <footer>
      <div class="footer">
        <div class="width1190">
          <div class="fl">
            <a href="index.html"><strong>XXX</strong></a
            ><a href="about.html">关于我们</a><a href="contact.html">联系我们</a
            ><a href="user.html">个人中心</a>
          </div>
          <div class="fr">
            <dl>
              <dt>
                <img
                  src="http://demo.mxyhn.xyz:8020/cssthemes6/12.20ZF27/images/erweima.png"
                  width="76"
                  height="76"
                />
              </dt>

              <dd>微信扫一扫<br />房价点评，精彩发布</dd>
            </dl>
            <dl>
              <dt>
                <img
                  src="http://demo.mxyhn.xyz:8020/cssthemes6/12.20ZF27/images/erweima.png"
                  width="76"
                  height="76"
                />
              </dt>

              <dd>微信扫一扫<br />房价点评，精彩发布</dd>
            </dl>
            <div class="clears"></div>
          </div>
          <div class="clears"></div>
        </div>
        <!--width1190/-->
      </div>
      <div class="copy">
        Copyright@ 2020 XXX 版权所有
        <a href="https://beian.miit.gov.cn">辽ICP备20010528号</a>
        &nbsp;&nbsp;&nbsp;&nbsp;
        技术支持：<a
          target="_blank"
          href="/"
          >18842681421</a
        >
      </div>
    </footer>
   
    <div :class="'message message-' + messageType" v-if="messageShowFlg">
      <div class="bar">
        <span v-if="messageType === 'info'">消息</span>
        <span v-else-if="messageType === 'success'">成功</span>
        <span v-else-if="messageType === 'error'">错误</span>
        <span v-else-if="messageType === 'warning'">警告</span>
        <span @click="closeMessage()" class="close">X</span>
      </div>
      <div>{{ msg }}</div>
    </div>
  </div>
</template>

<script>
import store from '../common/store.js'
import Login from './components/login.vue'

export default {
  components: {
    Login,
  },
  data: function() {
    return {
      subNavFangFlg: false,
      subNavCarFlg: false,
    }
  },
  computed: {
    loginShowFlg() {
      return store.state.loginFlg
    },
    messageShowFlg: function() {
      return this.store.state.messageOption.show
    },
    messageType: function() {
      return this.store.state.messageOption.type
    },
    msg: function() {
      return this.store.state.messageOption.message
    },
  },
  created: function() {
  	store.commit("checkLogin");
  },
  methods: {
    overFangNav: function() {
      this.subNavFangFlg = true
    },
    outFangNav: function() {
      this.subNavFangFlg = false
    },
    showLogin: function() {
      this.store.commit('changeLoginFlg', true)
    },
    loginOut :function () {
      this.store.commit("loginOut")
    },
    closeMessage: function() {
      this.message.close()
    },
    showcenter: function() {
      this.$router.push({
        name: 'user_center',
      })
    },
  },
}
</script>
<style></style>
